<template>
  <div class="admin_content">
    <div class="content_bg">
      <vue-particles
        color="#5cbdaa"
        :particleOpacity="0.7"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="4"
        linesColor="#5cbdaa"
        :linesWidth="2"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="login_bg"
        :style="paticles_height"
      >
      </vue-particles>
    </div>
    <div class="content_login">
      <dl class="admin_login">
        <el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="left" label-width="0px">
          <dt>
            <strong style="color: white">{{$appConf.appTitle}}</strong>
            <em style="color: white">{{sysPub}}</em>
          </dt>
          <dd class="user_icon">
            <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>
          </dd>
          <dd class="pwd_icon">
            <el-input type="password" v-model="loginForm.password" @keyup.enter.native="login" auto-complete="off"
                      placeholder="密码"></el-input>
          </dd>
          <dd>
            <el-checkbox v-model="checked" checked class="remember"><span style="color: white">记住密码</span></el-checkbox>
          </dd>
          <dd>
            <el-button type="primary" class="submit_btn" style="width:100%; background: #55b7a4;"
                       @click.native.prevent="login" :loading="loading">登录
            </el-button>
            <!--<input type="button" value="立即登陆" class="submit_btn" @click.native.prevent="login">-->
          </dd>
          <dd>
            <p>{{footer}}</p>
            <p>{{copyInfo}}</p>
          </dd>
        </el-form>
      </dl>
    </div>
  </div>
</template>
<script>
import md5 from "js-md5";
import { mapGetters } from "vuex";
export default {
  created() {
    this.setClientHeightF();
  },
  mounted() {},
  data() {
    return {
      loginForm: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "change" }
        ]
      },
      checked: true,
      loading: false,
      sysName: "",
      copyInfo: "",
      sysPub: "系统管理"
    };
  },
  computed: {
    ...mapGetters({
      clientHeight: "getClientHeight"
    }),
    paticles_height() {
      return { height: this.clientHeight };
    },
    footer() {
      return (
        "© 2017-" + new Date().getFullYear() + " 洛阳升韵网络科技有限公司 "
      );
    }
  },
  methods: {
    setClientHeightF() {
      var height = window.innerHeight + "px";
      this.$store.commit("setClientHeight", height);
    },
    login() {
      this.loading = true;
      console.log(md5(this.loginForm.password));
      this.$store
        .dispatch("login", {
          username: this.loginForm.username,
          password: md5(this.loginForm.password)
        })
        .then(
          ret => {
            this.$router.push(this.$appConf.loginSuccessRoute);
          },
          error => {
            console.log(error);
            this.loading = false;
          }
        );
    },
    focusPass() {}
  },
  components: {}
};
</script>
<style src="../../../../src/styles/login.css" scoped>
</style>
<style scoped  lang="scss" rel="stylesheet/scss">
@import "../../../../src/styles/vars.scss";
body {
  height: 100%;
  background: $color-primary;
  overflow: hidden;
}

.remember {
  margin: 0px 0px 35px 0px;
}

.content_bg {
  width: 100%;
  position: absolute;
  height: 100%;
  left: 0px;
  top: 0px;
  z-index: 10;
}

.admin_content {
  width: 100%;
  position: relative;
  background: #16a085;
  height: 100%;
  left: 0px;
  top: 0px;
}
.login_bg {
  background-color: $color-primary;
}
.content_login {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 100;
}
</style>
